import React from 'react';
import Chart from 'echarts-for-react';
import { Radio } from 'antd';
import request from '../../../utils/request';
// import {dailySoilRestoration} from '../../../services/cockpit';
// const bar1 = 'image://'+require('../../../assets/bar1.png');
const RadioGroup = Radio.Group;

// let data = {
//     dataValue:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//     time:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
// }

class Mynytjfx extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value:1,
            dataList: '',
            yAixs2:[],
            yAixs1:[],
            xAixs:[],
        };
    }
    componentDidMount() {
        this.shljqy(1)

    }

    shljqy = (type) => {
        request({
            url: `/sx-client/sx/onepic/tjfx?type=${type}&companyType=1`,
            method: 'GET',
          }).then(data => {
            if(data.rc === 0) {
                this.setState({
                    xAixs:data.ret.xAixs,
                    yAixs1:data.ret.yAixs1,
                    yAixs2:data.ret.yAixs2,
                })
            }
          })
    }

    onChange = (e) => {
        this.setState({
            value:e.target.value
        })
        this.shljqy(e.target.value)

    };
    setOption = () => {
        let myOption;
        // let data = this.state.dataList;
        myOption = {
        textStyle:{color:'#ccc'},
        color:'#70D7FF',
        tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        xAxis: [
            {
                axisLine:{lineStyle:{color:'#70D7FF'}},
                type: 'category',
                boundaryGap:true,
                axisTick: {
                    alignWithLabel: true
                },
                data: this.state.xAixs
            }
        ],
        yAxis: [
            {
                axisLine:{lineStyle:{color:'#66ABFF'}},
                splitLine:{show:false},
                type: 'value',
                name: 'kWh',
            },
            {
                axisLine:{lineStyle:{color:'#66ABFF'}},
                splitLine:{show:false},
                type: 'value',
                name: 't',
            }
        ],
        series: [
            {
                name:'发电量',
                type:'bar',
                // showSymbol:false,
                data:this.state.yAixs1
            },
            {
                name:'供热量',
                type:'line',
                // showSymbol:false,
                data:this.state.yAixs2,
                yAxisIndex: 1,      
            },
        ]
    };
        return myOption;
    };
    render() {
        return (
            <div>
                <div style={{position: 'absolute'}}>
                    <RadioGroup onChange={this.onChange} value={this.state.value}>
                        <Radio value={1}><span style={{color:'#fff'}}>一周</span></Radio>
                        <Radio value={2}><span style={{color:'#fff'}}>一个月</span></Radio>
                        <Radio value={3}><span style={{color:'#fff'}}>三个月</span></Radio>
                        <Radio value={4}><span style={{color:'#fff'}}>六个月</span></Radio>
                    </RadioGroup>
                </div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 290 }}
                />
            </div>
        )
    }
}
export default Mynytjfx;
